<template>
  <je-panel class="menu-form">
    <template #tbar>
      <div class="top">
        <je-dropdown :trigger="['click']">
          <je-button type="text">
            <template #icon> <i class="icon fal fa-plus-circle"></i></template>
            <span class="span"> {{ $t('btnAddText') }}</span>
            <i class="fal fa-angle-down"></i>
          </je-button>

          <template #overlay>
            <je-menu @click="handleChangeMenuItem">
              <div v-if="!menuNode.id">
                <je-menu-item key="MENU" text="模块">
                  <i class="icon jeicon jeicon-title"></i> 模块</je-menu-item
                >
                <je-menu-item key="MENU" disabled text="菜单">
                  <i class="icon fal fa-folder"></i> 菜单</je-menu-item
                >
                <je-menu-item
                  v-for="item in arrMenu.filter((item) => item.code !== 'MENU')"
                  :key="item.code"
                  :disabled="true"
                  :text="item.text"
                >
                  <i class="icon" :class="item.icon"></i>
                  {{ item.text }}
                </je-menu-item>
              </div>

              <div v-if="menuNode.id && menuNode.nodeInfoType === 'MENU'">
                <je-menu-item key="MENU" text="模块">
                  <i class="icon jeicon jeicon-title"></i> 模块</je-menu-item
                >
                <je-menu-item key="MENU" text="菜单">
                  <i class="icon fal fa-folder"></i> 菜单</je-menu-item
                >
                <je-menu-item
                  v-for="item in arrMenu.filter((item) => item.code !== 'MENU')"
                  :key="item.code"
                  :text="item.text"
                  :disabled="false"
                >
                  <i class="icon" :class="item.icon"></i>
                  {{ item.text }}
                </je-menu-item>
              </div>

              <div v-if="menuNode.id && menuNode.nodeInfoType !== 'MENU'">
                <je-menu-item key="MENU" text="模块">
                  <i class="icon jeicon jeicon-title"></i> 模块</je-menu-item
                >
                <je-menu-item key="MENU" disabled text="菜单">
                  <i class="icon fal fa-folder"></i> 菜单</je-menu-item
                >
                <je-menu-item
                  v-for="item in arrMenu.filter((item) => item.code !== 'MENU')"
                  :key="item.code"
                  :disabled="true"
                  :text="item.text"
                >
                  <i class="icon" :class="item.icon"></i>
                  {{ item.text }}
                </je-menu-item>
              </div>
            </je-menu>
          </template>
        </je-dropdown>

        <je-button type="text" :disabled="!menuNode.id" @click="handleOk()">
          <i class="icon fal fa-save"> </i> <span class="span">{{ $t('btnSaveText') }}</span>
        </je-button>

        <!-- 如果没有选中菜单或者是是叶子结点，那么删除按钮无法点击 -->
        <je-tooltip
          placement="top"
          :title="
            menuNode.children && menuNode.children.length !== 0
              ? '该菜单存在下级菜单，不允许删除'
              : ''
          "
        >
          <je-button
            type="text"
            :disabled="!menuNode.children || (menuNode.children && menuNode.children.length !== 0)"
            @click="handleDelete()"
          >
            <i class="icon fal fa-times"> </i> <span class="span">{{ $t('btnDeleteText') }}</span>
          </je-button>
        </je-tooltip>
        <je-button type="text" @click="handleResetStaticize">
          <i class="icon jeicon jeicon-broom"></i>
          <span class="span"> {{ $t('btnRemoveCacheText') }} </span>
        </je-button>
        <je-button
          type="text"
          :disabled="!menuNode.id"
          :loading="loading"
          icon="jeicon jeicon-seal"
          @click="handleDoDevelopPerm"
        >
          <span class="span"> {{ $t('btnLicenseToDevelopersText') }}</span>
        </je-button>
      </div>
    </template>

    <template #default>
      <je-form
        v-show="formState.MENU_MENUNAME"
        ref="formRef"
        class="content"
        :rules="rules"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :colon="false"
        size="small"
        item-style="margin-bottom:6px;"
      >
        <h2 class="h2title">
          <i class="icon fas fa-clipboard-list"></i>{{ $t('menuDetail.basicProperties') }}</h2
        >

        <div v-if="formState.MENU_NODEINFOTYPE === 'MENU'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>
          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <je-select
              v-model:value="formState.MENU_NODEINFOTYPE"
              disabled
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p"> {{ $t('menuDetail.menuConfigInfoDescTxt') }} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <je-form-item
            v-if="SY_PARENT == 'ROOT'"
            :label="$t('menuDetail.contextTopMenu')"
            name="MENU_LINK_TOPMENU_NAME"
          >
            <je-grid-select
              v-model:value="formState.MENU_LINK_TOPMENU_NAME"
              :querys="[{ type: '=', code: 'HEADMENU_TYPE_CODE', value: 'MENU' }]"
              config-info="JE_RBAC_HEADMENU,MENU_LINK_TOPMENU_NAME~MENU_LINK_TOPMENU_ID,HEADMENU_NAME~JE_RBAC_HEADMENU_ID,M"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'MT'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                class="select"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showFunctionModal">
                {{ $t('menuDetail.selectFunction') }}
              </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }} ： </h3>
              <p class="p"> {{ $t('menuDetail.mtConfigInfoDescTxt') }} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item name="MENU_FUNCTYPE">
            <template #label>
              <div>
                {{ $t('menuDetail.functionType') }}
              </div>
            </template>
            <je-select
              v-model:value="formState.MENU_FUNCTYPE"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
              config-info="JE_MENU_FUNCTYPE,formState.MENU_FUNCTYPE,code,S"
            />
          </je-form-item>

          <je-form-item
            v-if="formState.MENU_NODEINFOTYPE === 'MT' && formState.MENU_FUNCTYPE === 'form'"
            name="MENU_LOAD_FIRST_DATA"
          >
            <template #label>
              <div>
                {{ $t('menuDetail.loadFirstData') }}
              </div>
            </template>
            <je-switch
              v-model:value="formState.MENU_LOAD_FIRST_DATA"
              mode="checkbox"
              :label="$t('menuDetail.enable')"
            />
            <span style="color: #3265f5; padding-left: 10px; font-style: italic">{{
              $t('menuDetail.loadFirstDataPrompt')
            }}</span>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.workflowModule')" name="MENU_WFMODULE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_WFMODULE"
                class="select"
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                config-info="JE_WF_PROCESSTYPE,MENU_WFMODULE~code,S"
                @select="selectData"
              >
              </je-select>
              <!-- <je-button class="btn">
                <div>{{ $t('menuDetail.maintainModule') }} </div>
              </je-button> -->
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.workflowMenuAlias')" name="MENU_WFNAME">
            <je-input v-model:value.trim="formState.MENU_WFNAME" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'DIC'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                class="select"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showModal">
                {{ $t('menuDetail.selectDictionary') }}
              </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p"> {{ $t('menuDetail.dicConfigInfoDescTxt') }} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'IDDT'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showModal()"> 选择插件 </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p"> {{ $t('menuDetail.iddtConfigInfoDescTxt') }} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'CHART'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                class="select"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showModal">
                {{ $t('menuDetail.selectChart') }}
              </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p">
                {{ $t('menuDetail.chartConfigInfoDescTxt') }}
              </p>
              <br />
              <h3 class="title"> 隐藏查询信息: </h3>
              <p class="p"> 可以隐藏查询区域: top|left|all </p>
              <br />
              <h3 class="title"> 图表默认参数:</h3>
              <p class="p"> 表默认参数Object格式,如:{a:'',b:'',...} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'REPORT'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                class="select"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showModal">
                {{ $t('menuDetail.selectReport') }}
              </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p">{{ $t('menuDetail.reportConfigInfoDescTxt') }}</p>

              <br />

              <h3 class="title"> 隐藏查询信息： </h3>
              <p class="p"
                >当给报表参数设置了默认值后,可以隐藏查询工具条,true|false
                参数是Object格式,如:{params:'val'} 填报报表是否编辑：true|false
                填报报表默认值：Object格式,如:{field:'val'}</p
              >
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'PORTAL'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <div class="selectWrap">
              <je-select
                v-model:value="formState.MENU_NODEINFOTYPE"
                disabled
                :get-popup-container="(triggerNode) => triggerNode.parentNode"
                class="select"
              >
                <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                  {{ item.text }}
                </je-select-option>
              </je-select>
              <je-button class="btn" @click="showModal">
                {{ $t('menuDetail.selectPortal') }}
              </je-button>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p"> {{ $t('menuDetail.portalConfigInfoDescTxt') }} </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'URL'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <je-select
              v-model:value="formState.MENU_NODEINFOTYPE"
              disabled
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p">
                {{ $t('menuDetail.urlConfigInfoDescTxt') }}
              </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <div v-if="formState.MENU_NODEINFOTYPE === 'IFRAME'">
          <je-form-item :label="$t('menuDetail.name')" name="MENU_MENUNAME">
            <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
          </je-form-item>

          <je-form-item :label="$t('menuDetail.icon')" name="MENU_ICON">
            <je-icon v-model:value="formState.MENU_ICON" />
          </je-form-item>

          <!-- <je-form-item :label="$t('menuDetail.iconColor')">
            <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
          </je-form-item> -->

          <je-form-item :label="$t('menuDetail.type')" name="MENU_NODEINFOTYPE">
            <je-select
              v-model:value="formState.MENU_NODEINFOTYPE"
              disabled
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.product')" name="SY_PRODUCT_CODE">
            <!-- <je-input v-model:value.trim="formState.SY_PRODUCT_CODE" /> -->
            <je-select
              v-model:value.trim="formState.SY_PRODUCT_CODE"
              :options="productSelect"
              @change="changeProduct"
            ></je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.configInfo')" name="MENU_NODEINFO">
            <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
          </je-form-item>

          <je-form-item label="&nbsp;" name="MENU_PROMPT">
            <div class="info">
              <h3 class="title"> {{ $t('menuDetail.configInfoDesc') }}： </h3>
              <p class="p">
                自定义编码,链接地址(支持系统变量嵌入)。例如：000A,http://www.jepaas.com?userId='{@USER_ID@}'
              </p>
            </div>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.enable')" name="SY_STATUS">
            <je-radio-group v-model:value="formState.SY_STATUS">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.functionDisplayMode')" name="MENU_LAYOUT">
            <je-radio-group v-model:value="formState.MENU_LAYOUT">
              <je-radio value="main">{{ $t('menuDetail.main') }}</je-radio>
              <je-radio value="app">{{ $t('menuDetail.app') }}</je-radio>
            </je-radio-group>
          </je-form-item>
          <je-form-item :label="$t('menuDetail.quickMenu')" name="MENU_QUICKSTART">
            <je-radio-group v-model:value="formState.MENU_QUICKSTART">
              <je-radio value="1">{{ $t('menuDetail.yes') }}</je-radio>
              <je-radio value="0">{{ $t('menuDetail.no') }}</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.quickMenuBgColor')" name="MENU_BGCOLOR">
            <je-select
              v-model:value="formState.MENU_BGCOLOR"
              :get-popup-container="(triggerNode) => triggerNode.parentNode"
            >
              <je-select-option
                v-for="(item, index) in arrBackground"
                :key="index"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </je-form-item>

          <je-form-item :label="$t('menuDetail.sorting')" name="SY_ORDERINDEX">
            <je-input-number
              v-model:value="formState.SY_ORDERINDEX"
              :min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
              style="width: 100%"
            />
          </je-form-item>

          <!-- <je-form-item name="MENU_HIDELOCATION">
            <template #label>
              <div>
                {{ $t('menuDetail.menuNav') }}
              </div>
            </template>
            <je-switch v-model:value="formState.MENU_HIDELOCATION" mode="checkbox">{{
              $t('menuDetail.disable')
            }}</je-switch>
            <span class="prompt">
              {{ $t('menuDetail.disablePrompt') }}
            </span>
          </je-form-item> -->
        </div>

        <!-- <div v-if="['MENU', 'MT', 'IDDT'].indexOf(formState.MENU_NODEINFOTYPE) !== -1">
          <h2 class="h2title"><i class="icon fas fa-clipboard-list"></i>数字提醒 </h2>

          <je-form-item label="数字提醒" name="MENU_BADGE">
            <je-switch v-model:value="formState.MENU_BADGE" mode="checkbox">启用</je-switch>
            <span class="prompt"> 菜单右上角会根据条件展示出数字。 </span>
          </je-form-item>

          <je-form-item label="数字来源" name="MENU_BADGETYPE">
            <je-radio-group v-model:value="formState.MENU_BADGETYPE">
              <je-radio value="sql">SQL</je-radio>
              <je-radio value="action">自定义</je-radio>
              <je-radio value="menu">其它菜单加和</je-radio>
            </je-radio-group>
          </je-form-item>

          <je-form-item
            v-if="['sql', 'action'].indexOf(formState.MENU_BADGETYPE) !== -1"
            label="来源内容"
            name="MENU_BADGEINFO"
          >
            <je-input
              v-model:value="formState.MENU_BADGEINFO"
              placeholder="SQL:标准sql；自定义:bean,方法名；"
            />
          </je-form-item>

          <je-form-item
            v-if="['menu'].indexOf(formState.MENU_BADGETYPE) !== -1"
            label="加和菜单"
            name="MENU_BADGEMENUTEXTS"
          >
            <TreeSelect
              v-model:value="formState.MENU_BADGEMENUTEXTS"
              config-info="JE_CORE_MENU,MENU_BADGEMENUTEXTS~MENU_BADGEINFO,text~id,M"
              product="rbac"
              :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
            />
          </je-form-item>

          <je-form-item label="更新条件" name="MENU_BADGELOAD">
            <je-radio-group v-model:value="formState.MENU_BADGELOAD">
              <je-radio value="idit">功能Load</je-radio>
              <je-radio value="load">插件自维护</je-radio>
            </je-radio-group>
          </je-form-item>
        </div> -->

        <h2 class="h2title"> <i class="icon fas fa-clipboard-list"></i>其他信息</h2>

        <je-form-item label="备注说明" name="MENU_HELP">
          <je-textarea v-model:value="formState.MENU_HELP" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="创建人" name="SY_CREATEUSERNAME">
          <je-input v-model:value.trim="formState.SY_CREATEUSERNAME" disabled />
        </je-form-item>

        <je-form-item label="创建时间" name="SY_CREATETIME">
          <je-input v-model:value.trim="formState.SY_CREATETIME" disabled />
        </je-form-item>
      </je-form>
      <div v-show="!formState.MENU_MENUNAME" class="no-menu-box">
        <img :src="noMenu" alt="" />
        <div class="no-menu-prompt">请搭建您的菜单地图～</div>
      </div>
      <AddMenu ref="addMenu"></AddMenu>
      <div v-if="showSelectFunction">
        <je-select-function
          :visble="showSelectFunction"
          @changeModal="changeModal"
        ></je-select-function>
      </div>
    </template>
  </je-panel>
</template>

<script>
  import {
    ref,
    reactive,
    toRefs,
    toRaw,
    defineComponent,
    watch,
    onMounted,
    onBeforeMount,
  } from 'vue';
  import { Dropdown, Tooltip } from 'ant-design-vue';
  import {
    Modal,
    Icon,
    Form,
    Panel,
    InputSelect,
    Input,
    InputNumber,
    Select,
    Radio,
    // Checkbox,
    Menu,
    Button,
  } from '@jecloud/ui';

  import { SelectWindow } from '@jecloud/func';

  import { useStore } from '@/store/app-store';

  import emitter from '@/eventBus';

  import AddMenu from '@/components/menu/add-menu.vue';

  import SelectFunction from '@/components/menu/function.vue';

  import noMenu from '@/assets/no-menu.png';

  import { getDDItemList, loadDDItemByCodes } from '@jecloud/utils';

  import {
    getMenuDetail,
    doUpdateMenu,
    doRemoveMenu,
    doResetStaticize,
    doDevelopPerm,
    getProDuct,
  } from '@/api';

  import { MENU_CORE_WFMODULE } from '@/helper/constant';

  const getFormState = () => {
    return {
      MENU_MENUNAME: '',
      MENU_ICON: '',
      MENU_FONTICONCOLOR: '',
      MENU_NODEINFOTYPE: 'MENU',
      MENU_NODEINFO: '',
      SY_STATUS: '1',
      MENU_QUICKSTART: '0',
      MENU_BGCOLOR: undefined,
      MENU_FUNCTYPE: undefined,
      MENU_LOAD_FIRST_DATA: '0',
      MENU_WFMODULE: undefined,
      MENU_WFNAME: '',
      SY_ORDERINDEX: '',
      MENU_MENUSUBNAME: '',
      MENU_HIDELOCATION: undefined,
      MENU_BADGE: undefined,
      MENU_BADGETYPE: 'sql',
      MENU_BADGEINFO: '',
      MENU_BADGEMENUTEXTS: '',
      MENU_BADGELOAD: 'load',
      MENU_HELP: '',
      JE_CORE_MENU_ID: '',
      SY_CREATEUSERNAME: '',
      SY_CREATETIME: '',
      SY_PRODUCT_CODE: '',
      SY_PRODUCT_NAME: '',
      SY_PRODUCT_ID: '',
      MENU_LAYOUT: '',
      MENU_LINK_TOPMENU_NAME: '',
      MENU_LINK_TOPMENU_ID: '',
    };
  };

  export default defineComponent({
    name: 'MenuForm',
    components: {
      AddMenu,
      JeDropdown: Dropdown,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeTextarea: Input.TextArea,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
      // JeCheckbox: Checkbox,
      JeMenu: Menu,
      JeMenuItem: Menu.Item,
      JeButton: Button,
      JeTooltip: Tooltip,
      JeIcon: Icon,
      // JeColor: Color,
      JePanel: Panel,
      // TreeSelect: InputSelect.Tree,
      JeSelectFunction: SelectFunction,
      JeGridSelect: InputSelect.Grid,
    },
    setup(props, { emit }) {
      const state = reactive({
        loading: ref(false),
        store: useStore(),
        addMenu: ref(),
        formRef: ref(),
        formState: reactive(getFormState()),
        menuNode: {
          id: '',
          text: '',
          nodeInfoType: '',
          children: [],
        },
        labelCol: {
          style: { width: '140px', margin: '0 2px 0 0' },
        },
        wrapperCol: {
          style: { margin: '0 0 0 0' },
        },
        rules: {
          MENU_MENUNAME: [
            { required: true, message: '请输入名称' },
            { max: 40, message: '不能大于40个字符' },
            { pattern: '^[^\\\\/*?:"\'<>|\x22]+$', message: '不能输入非法字符' },
          ],

          SY_ORDERINDEX: [{ required: true, message: '请输入排序' }],
          MENU_HELP: [
            { max: 255, message: '不能大于255个字符' },
            { pattern: '^[^\\\\/*?:"\'<>|\x22]+$', message: '不能输入非法字符' },
          ],
          SY_PRODUCT_CODE: [{ required: true, message: '请选择所属服务信息' }],
        },
        arrMenu: [],
        arrBackground: [],
        arrWFModule: MENU_CORE_WFMODULE,
        SY_PARENT: '',
        showSelectFunction: false, //选择功能默认不显示
        productSelect: [],
        noMenu: noMenu, //菜单缺省图
      });
      watch(
        () => state.formState.MENU_NODEINFOTYPE,
        (val) => {
          if (val == 'MENU') {
            state.rules.MENU_NODEINFO = [{ required: false }];
          } else {
            state.rules.MENU_NODEINFO = [{ required: true, message: '请输入配置信息' }];
          }
        },
        { deep: true, immediate: true },
      );
      //监听功能类型
      watch(
        () => state.formState.MENU_FUNCTYPE,
        (newVal) => {
          if (newVal == 'grid') {
            state.formState.MENU_LOAD_FIRST_DATA = '0';
          }
        },
      );
      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
      });

      const methods = {
        changeProduct(value, item) {
          state.formState.SY_PRODUCT_NAME = item.label;
          state.formState.SY_PRODUCT_CODE = value;
          state.formState.SY_PRODUCT_ID = item.JE_PRODUCT_MANAGE_ID;
        },
        // 获取产品
        getProductData() {
          getProDuct({
            tableCode: 'JE_PRODUCT_MANAGE',
            funcCode: 'JE_PLATFORM_PRODUCT_MANAGE',
            j_query: JSON.stringify({
              order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
              custom: [
                {
                  code: 'PRODUCT_ENABLE_STATE',
                  value: 1,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          })
            .then((res) => {
              if (res.success) {
                const data = res.data.rows || [];
                data.forEach((item) => {
                  const { PRODUCT_NAME, PRODUCT_CODE, JE_PRODUCT_MANAGE_ID } = item;
                  state.productSelect.push({
                    label: PRODUCT_NAME,
                    value: PRODUCT_CODE,
                    JE_PRODUCT_MANAGE_ID,
                  });
                });
              }
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
        changeModal(obj) {
          state.showSelectFunction = false;
          if (Object.keys(obj).length) {
            state.formState.MENU_NODEINFO = obj.FUNCINFO_FUNCCODE;
            state.formState.SY_PRODUCT_NAME = obj.PRODUCT_NAME;
            state.formState.SY_PRODUCT_CODE = obj.PRODUCT_CODE;
            state.formState.SY_PRODUCT_ID = obj.JE_PRODUCT_MANAGE_ID;
            state.formState.MENU_MENUNAME = obj.FUNCINFO_FUNCNAME;
          }
        },
        selectData(key) {
          state.formState.MENU_WFMODULE = key;
        },
        // 添加菜单弹出框
        handleChangeMenuItem(e) {
          state.addMenu.showCurrentModal({
            title: e.item.text,
            type: e.key,
          });
        },
        // 选择功能
        showFunctionModal() {
          state.showSelectFunction = true;
        },
        // 打开弹窗
        showModal() {
          let title = '';
          let type = '';
          let configInfo = '';
          let querys = [];

          const nodeInfoType = state.formState.MENU_NODEINFOTYPE;
          if (nodeInfoType === 'MT') {
            title = '选择功能';
            type = 'tree';
            configInfo =
              'JE_CORE_FUNCINFO,MENU_NODEINFO~MENU_MENUNAME~MENU_MENUSUBNAME,code~text~bean.FUNCINFO_FUNCNAME_EN,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
              {
                code: 'FUNCINFO_NODEINFOTYPE',
                type: '!=',
                value: 'FUNCFIELD',
              },
            ];
          } else if (nodeInfoType === 'DIC') {
            title = '选择字典';
            type = 'grid';
            configInfo =
              'JE_CORE_DICTIONARY,MENU_NODEINFO~MENU_MENUNAME,DICTIONARY_DDCODE~DICTIONARY_DDNAME,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
              {
                code: 'DICTIONARY_DDTYPE',
                type: 'notIn',
                value: ['CUSTOM', 'SQL', 'SQL_TREE', 'DYNA_TREE'],
              },
            ];
          } else if (nodeInfoType === 'CHART') {
            title = '选择图表';
            type = 'tree';
            configInfo = 'JE_CORE_CHARTS,MENU_NODEINFO~MENU_MENUNAME,code~text,S,';
            querys = [
              // {
              //   code: 'SY_JESYS',
              //   type: '=',
              //   value: '1',
              // },
            ];
          } else if (nodeInfoType === 'REPORT') {
            title = '选择报表';
            type = 'tree';
            configInfo = 'JE_CORE_REPORT,MENU_NODEINFO~MENU_MENUNAME,code~text,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
            ];
          } else if (nodeInfoType === 'PORTAL') {
            title = '选择门户';
            type = 'grid';
            configInfo =
              'JE_CORE_PORTAL_ENGINE,MENU_NODEINFO~MENU_MENUNAME~MENU_ICONCLS~MENU_MENUSUBNAME,JE_CORE_PROTAL_ID~PROTAL_BT~PROTAL_CLS~PROTAL_BT_EN,S,';
            querys = [
              // {
              //   code: 'PROTAL_JHFS_CODE',
              //   type: '=',
              //   value: 'func',
              // },
              // {
              //   code: 'PROTAL_QY_CODE',
              //   type: '=',
              //   value: '1',
              // },
              {
                code: 'ENGINE_ENABLE_CODE',
                type: '=',
                value: '1',
              },
            ];
          } else if (nodeInfoType === 'IDDT') {
            title = '选择插件';
            type = 'grid';
            configInfo =
              'JE_META_MICROAPP,MENU_NODEINFO~MENU_MENUNAME,MICROAPP_CODE～MICROAPP_NAME,S,';
            querys = [
              {
                code: 'SY_STATUS',
                type: '=',
                value: '1',
              },
              {
                code: 'MICROAPP_ACTIVETYPE',
                type: '=',
                value: 'menu',
              },
            ];
          }

          SelectWindow.show({
            title,
            type,
            configInfo,
            querys,
            callback: function ({ rows, config, $modal }) {
              let data = rows[0];

              if (nodeInfoType === 'MT') {
                state.formState.MENU_MENUNAME = data.text;
                state.formState.MENU_NODEINFO = data.code;
              } else if (nodeInfoType === 'DIC') {
                state.formState.MENU_MENUNAME = data.DICTIONARY_DDNAME;
                state.formState.MENU_NODEINFO = data.DICTIONARY_DDCODE;
              } else if (nodeInfoType === 'CHART') {
                state.formState.MENU_MENUNAME = data.text;
                state.formState.MENU_NODEINFO = data.code;
              } else if (nodeInfoType === 'REPORT') {
                state.formState.MENU_MENUNAME = data.text;
                state.formState.MENU_NODEINFO = 'JE_REPORT_' + data.code + ',' + data.code;
              } else if (nodeInfoType === 'PORTAL') {
                state.formState.MENU_MENUNAME = data.ENGINE_TITLE; //菜单名称
                state.formState.MENU_NODEINFO = data.ENGINE_CODE; //配置信息
                state.formState.SY_PRODUCT_CODE = data.SY_PRODUCT_CODE; //服务编码
                state.formState.SY_PRODUCT_NAME = data.SY_PRODUCT_NAME; //服务名称
                state.productSelect.forEach((productItem) => {
                  if (productItem.value == data.SY_PRODUCT_CODE) {
                    state.formState.SY_PRODUCT_ID = productItem.JE_PRODUCT_MANAGE_ID; //服务id
                  }
                });
              } else if (nodeInfoType === 'IDDT') {
                state.formState.MENU_MENUNAME = data.MICROAPP_NAME;
                state.formState.MENU_NODEINFO = data.MICROAPP_CODE;
              }
            },
          });
        },

        // 获取菜单详情
        getData(id) {
          getMenuDetail({
            tableCode: 'JE_CORE_MENU',
            pkValue: id,
          })
            .then((res) => {
              const data = res.data;

              Object.keys(state.formState).forEach((item) => {
                state.formState[item] = data[item];
              });

              state.formState.SY_STATUS = data.SY_STATUS || '1';
              state.formState.MENU_QUICKSTART = data.MENU_QUICKSTART || '0';
              // state.formState.MENU_HIDELOCATION = data.MENU_HIDELOCATION;
              state.formState.MENU_BADGE = data.MENU_BADGE;
              state.formState.MENU_LAYOUT = data.MENU_LAYOUT || 'main';
              state.formState.SY_ORDERINDEX = state.formState.SY_ORDERINDEX
                ? String(state.formState.SY_ORDERINDEX)
                : '';
              state.formState.MENU_BGCOLOR = state.formState.MENU_BGCOLOR || methods.getColor();
              state.SY_PARENT = data.SY_PARENT;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
        // 随机获取一个颜色
        getColor() {
          var item = state.arrBackground[Math.floor(Math.random() * state.arrBackground.length)];
          return item.code || '#52C6C6';
        },
        handleOk() {
          state.formRef
            .validate()
            .then(() => {
              methods.handleDoUpdate();
            })
            .catch((error) => {
              console.error(error);
            });
        },

        // 保存菜单
        handleDoUpdate() {
          const vals = toRaw(state.formState);
          for (let key in vals) {
            vals[key] = vals[key] || '';
          }
          doUpdateMenu({
            ...vals,
            tableCode: 'JE_CORE_MENU',
            // MENU_HIDELOCATION: state.formState.MENU_HIDELOCATION,
            MENU_BADGE: state.formState.MENU_BADGE,
          })
            .then((res) => {
              Modal.notice(res.message, 'success');

              emitter.emit('checkedMenu', { id: state.formState.JE_CORE_MENU_ID, isLoad: true });

              // menuNode 同步修改
              state.menuNode.text = state.formState.MENU_MENUNAME;
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        handleDelete() {
          Modal.confirm(`确认删除：${state.menuNode.text}?`, () => {
            methods.doDelete();
          });
        },

        // 删除菜单
        doDelete() {
          doRemoveMenu({
            ids: state.formState.JE_CORE_MENU_ID,
            tableCode: 'JE_CORE_MENU',
            doTree: true,
          })
            .then((res) => {
              Modal.notice(res.message, 'success');

              // 表单数据重置
              Object.assign(state.formState, getFormState());

              // 刷新菜单树
              emitter.emit('refreshMenu', { id: state.formState.JE_CORE_MENU_ID });

              // 重置点击菜单的节点数据
              state.store.changeMenuNode({});
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        handleResetStaticize() {
          doResetStaticize({})
            .then((res) => {
              Modal.notice(res.message, 'success');
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },

        handleDoDevelopPerm() {
          state.loading = true;
          doDevelopPerm({
            productId: state.formState.SY_PRODUCT_ID,
            menuId: state.formState.JE_CORE_MENU_ID,
          })
            .then((res) => {
              state.loading = false;
              Modal.notice(res.message, 'success');
            })
            .catch((error) => {
              state.loading = false;
              Modal.alert(error.message, 'error');
            });
        },
      };

      watch(
        () => state.store.menuNode,
        (val, old) => {
          Object.keys(state.menuNode).forEach((item) => {
            state.menuNode[item] = val[item];
          });

          if (val.id) {
            methods.getData(val.id);
          } else {
            // 表单数据重置
            Object.assign(state.formState, getFormState());
          }
        },
      );
      onBeforeMount(() => {
        loadDDItemByCodes(['JE_MENU_TYPE', 'JE_MENU_BGCOLOR']).then(() => {
          const list = getDDItemList('JE_MENU_TYPE');
          list.unshift({
            code: 'MENU',
            text: '模块',
            icon: 'jeicon jeicon-title',
          });
          state.arrMenu = list;
          state.arrBackground = getDDItemList('JE_MENU_BGCOLOR');
        });
        methods.getProductData();
      });
      onMounted(() => {
        emitter.off('refreshForm');
        emitter.on('refreshForm', (obj) => {
          methods.getData(obj.id);
        });
      });

      return {
        ...toRefs(state),
        ...methods,
        modalOption,
      };
    },
  });
</script>
<style lang="less">
  .menu-form {
    .top .ant-btn {
      padding: 4px 12px !important;
      &:hover {
        color: #3f3f3f !important;
        background: #d9d9d9 !important;
      }
      &[disabled]:hover {
        color: #00000040 !important;
        background: transparent !important;
      }
    }
    .selectWrap {
      position: relative;
      display: flex;
      .btn {
        position: absolute;
        top: 0;
        right: 0;
      }
      // .ant-select-arrow {
      //   right: 100px;
      // }
    }
  }
</style>
<style lang="less" scoped>
  .menu-form {
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    height: 100%;
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    .top {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 0 0 4px;
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      background: #f7f9fc;
      .span {
        margin: 0 0 0 8px;
      }
    }
    .content {
      height: auto !important;
      padding: 20px 100px 20px 60px;
      .h2title {
        margin: 0 0 20px 0;
        font-size: 18px;
        color: #3265f5;
        .icon {
          margin: 0 10px 0 0;
        }
      }
      .info {
        padding: 5px 10px 10px 10px;
        border: 1px solid #a8d09d;
        background: #eff9f2;
        color: #36761f;
        font-size: 14px;
        .title {
          margin: 0;
          color: #36761f;
          font-size: 14px;
          font-weight: normal;
        }
        .p {
          margin: 4px 0 0 0;
          line-height: 20px;
        }
      }
      .prompt {
        margin: 0 0 0 10px;
        color: #3265f5;
        font-style: italic;
      }
      .inputWrap {
        position: relative;
        .setIcon {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -50%);
          cursor: pointer;
        }
      }
    }
    .no-menu-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 580px;
        height: 404px;
      }
      .no-menu-prompt {
        color: #a9aba9;
        font-size: 14px;
        padding-top: 20px;
      }
    }
  }
</style>
